<template>
	<view>
		<view class="tp-h64 level_align tp-ptb0lr30" style="background: #FFE8E6;">
			提示：请先完善出行人信息
		</view>

		<!--出行人信息 S -->
		<view class="tp-bgf level_align flex_between tp-h88 tp-mb2 tp-ptb0lr30">
			<view class="level_align tp-fc333 tp-fz30">
				<view class="tp-mr20 lan-line"></view>
				<text>出行人信息</text>
			</view>
			<view @click="goToMen" class="tp-ptb0lr40 tp-ls4 tp-fc tp-h56 tp-border1 tp-br40 center_combo tp-fz26" style="border-color: #00B4FF;">
				添加
			</view>
		</view>
		<view class="tp-ptb0lr30 tp-bgf level_align flex_between tp-h98 tp-fc333 tp-fz28" v-for="(item,index) in riderPersionList"
		 :key="index">
			<view class="level_align flex-1">
				<image @click="handleDelRider(item,index)" class="tp-img28 tp-mr20" src="../static/imgs/icons/del.png" mode=""></image>
				<text class=" tp-fz30 tp-fw600 ellispsis1 tp-mr20" style="max-width: 180rpx;">{{item.passengerName}}</text>
				<text class=" tp-mr20">{{item.phone}}</text>
				<text class="">{{item.star}}</text>
			</view>
			<uni-icons @click="pageJumps('/pagesTravel/bus.addRider?id=' + item.id + '&scene=1')" type="arrowright" size="18"
			 color="#999"></uni-icons>
		</view>
		<!--出行人信息 E -->

		<!-- 优惠 S -->
		<view class="tp-mt20">
			<view class="tp-bgf tp-mb2 level_align flex_between tp-pr tp-ptb0lr30 tp-h88" @click="pageJumps('./evaluateMore')">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>优惠</text>
				</view>
			</view>
			<view class="tp-ptb0lr30 tp-bgf">
				<view class="level_align tp-bdbm tp-h98" @click="handleGoBusCouponList">
					<text class="tp-fz30 tp-mr30">优惠券：</text>
					<view class="level_align flex-1 flex_end">
						<input class="tp-tr tp-mr20" type="text" disabled :placeholder="integralPlacholde" :value="choosedBusCoupon.couponName" />
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
				<view class="level_align  tp-h98">
					<text class="tp-fz30 tp-mr10">积分抵扣：</text>
					<view class="level_align flex-1 flex_end">
						<input class="tp-tr" type="number" :placeholder="maxYongJifen" v-model="jifen" @input="inputJifen" />
					</view>
				</view>
				<view class="level_align tp-bdbm tp-h98">
					<text class="tp-fz30 tp-mr30">订单可获积分:</text>
					<view class="level_align flex-1 flex_end">
						<input type="number" disabled=""  v-model="rewardJifen"  />
					</view>
				</view>
			</view>
		</view>
		<!-- 优惠 E -->

		<!-- 须知 S -->
		<view class="level_align tp-h88 tp-ptb0lr30  tp-fc333 tp-fz28 tp-lh44" @click="isRead = !isRead">
			<image v-if="!isRead" class="tp-img28 tp-mr20" src="static/choose0-icon.png" mode=""></image>
			<image v-if="isRead" class="tp-img28 tp-mr20" src="static/choose1-icon.png" mode=""></image>
			<view class="flex-1 level_align flex_wrap">
				购买须知 <text class="tp-fc" @click.stop="pageJumps('/pages/others/depositRule?type=20&name=定制旅游订单说明')">《定制旅游说明》</text>
			</view>
		</view>
		<!-- 须知 E -->

		<view class="tp-h98 tp-mt20"></view>
		<!-- 底边框 S -->
		<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100">
			<view class="level_align">
				<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
				<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
			</view>
			<view class="level_align">
				<view class="level_align tp-mr30" @click="handleShowPriceDetail">
					<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
					<uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
				</view>
				<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
					预定
				</view>
			</view>
		</view>
		<!-- 底边框 E -->
		<uni-popup ref="priceDetail" type="bottom">
			<view class="popop_content">
				<view class="tp-ptb0lr30 tp-fz30">
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>定制价格</text>
						<view class="level_align">
							<text>￥{{orderPrice}}</text></text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>优惠券抵扣</text>
						<view class="level_align">
							<text>-￥{{choosedBusCoupon && choosedBusCoupon.amount || 0}}</text>
						</view>
					</view>
					<view class="tp-h88 level_align flex_between tp-bdbm">
						<text>积分抵扣</text>
						<view class="level_align">
							<text>-￥{{trueJifen || 0}}({{form.jifen}}积分)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tp-h2 tp-bcF5"></view>
			<view class="tp-h98 level_align tp-ptb0lr30 tp-bbox flex_between tp-bgf tp-btn-h100" style="z-index: 10;">
				<view class="level_align">
					<text class="tp-fz26 tp-fc333 tp-mr15">总价：</text>
					<text class="tp-fz36 tp-red">￥{{totalMoney}}</text>
				</view>
				<view class="level_align">
					<view class="level_align tp-mr30" @click="handleShowPriceDetail('close')">
						<text class="tp-fz26 tp-fc333 tp-mr15">明细</text>
						<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
					</view>
					<view @click="handeSubmitOrder" class="tp-br12 tp-fcF tp-fz32 tp-h72 center_combo" style="background: #FFAF3C;width: 240rpx;">
						预定
					</view>
				</view>
			</view>
		</uni-popup>
		<CommonPaySecond ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @payMoney="payMoney" @cancle="noPay"
		 @closeK="noPay" @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
	</view>
</template>

<script>
	import utils from "@/utils/utils.js"
	import $DB from "@/utils/debounce.js"
	import CommonPaySecond from './common/common-pay-second.vue'
	export default {
		components: {
			CommonPaySecond
		},
		data() {
			return {
				isRead: false, // 是否阅读须知
				orderId: "", //订单id，
				memberNum: null, // 人数 后台给
				maxJifen: null, // 最大可抵扣积分 后台给
				orderPrice: null, // 总价
				couponList: [], // 优惠券列表
				form: {
					jifen: 0, //	用户消费的积分(请给个默认值0)
				},
				maxYongJifen: '', // 可用积分说明
				jifen: null, // 输入框输入的
				trueJifen: 0, // 实际抵扣积分
				rewardJifen:0,//可获积分
			};
		},
		onLoad(opt) {
			this.orderId = opt.id;
			this.$store.commit('delRiderList')
			this.$store.commit('delChoosedBusCoupon')
			this.getPageInfo()
		},
		computed: {
			// 积分选择提示
			integralPlacholde() {
				return this.couponList.length === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			// 总价/
			totalMoney() {
				let money = 0;
				// 订单的价钱
				if (this.orderPrice) {
					money += this.orderPrice
				}
				// 优惠券抵扣
				if (this.choosedBusCoupon && this.choosedBusCoupon.amount) {
					money -= Number(this.choosedBusCoupon.amount)
					if (money < 0) {
						money = 0
					}
				}
				// 积分抵扣
				if (money > (Number(this.maxJifen) / 100) || money > (Number(this.jifen) / 100)) { // 房间费用大于 最多抵扣积分或者  输入的积分 才可以使用积分
					if (Number(this.getCustomerInfo.rewardPoint) < Number(this.maxJifen) && Number(this.jifen) > Number(this
							.getCustomerInfo.rewardPoint)) {
						// 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分
						// console.log(' 当前拥有的 小于 可抵扣的  并且  输入的积分 大于 当前拥有的  取 当前拥有的所有积分');
						this.trueJifen = parseFloat(((this.getCustomerInfo.rewardPoint / 100) * Number(this.getCustomerInfo.jifenDiscount))
							.toFixed(2))
						this.form.jifen = this.getCustomerInfo.rewardPoint
					} else if (Number(this.jifen) > Number(this.maxJifen)) {
						// 积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的
						// console.log('积分充足 并且 输入的积分 大于 可抵扣的 取 可抵扣的');
						this.trueJifen = parseFloat(((this.maxJifen / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(
							2))
						this.form.jifen = this.maxJifen
					} else {
						// 积分充足 并且 输入的积分小于可抵扣的  取 输入的
						// console.log('积分充足 并且 输入的积分小于可抵扣的  取 输入的');
						this.trueJifen = parseFloat(((Number(this.jifen) / 100) * Number(this.getCustomerInfo.jifenDiscount)).toFixed(2))
						this.form.jifen = this.jifen || 0
					}
				}
				money -= Number(this.trueJifen)
				money = parseFloat((money).toFixed(2))
				return money
			},
			// 出行人
			riderPersionList() {
				let arr = this.$store.getters.getRiderList
				if (arr && arr[0] && arr[0].star) {
					return this.$store.getters.getRiderList
				} else {
					arr.map(item => {
						item.star = utils.employStarHidden(item.certificateNumber, 4, 4)
					})
					return arr
				}
			},
			orderInfo() {
				let o = {
					orderId: this.orderId,
					type: 1,
					orderType: 4
				}
				return o
			},
			// // 获取选择优惠券
			choosedBusCoupon: {
				get() {
					return this.$store.getters.getChoosedBusCoupon
				},
				set() {}
			}
		},
		watch: {
			totalMoney() {
				this.getRewardJifen()
			},
		},
		methods: {
			// 奖励积分计算
			getRewardJifen() {
				this.$http.get(this.$api.rewardJifen + '?shopType=1&shopId=' + '54' + '&orderPrice=' + this.totalMoney)
					.then(res => {
						if (res.code === 200) {
							this.rewardJifen = res.msg
							this.rewardJifen = parseFloat(this.rewardJifen.toFixed(0))
						}
					})
			},
			// 去除当前这个出行人
			handleDelRider(item) {
				this.riderPersionList.forEach((it_, in_) => {
					if (item.id === it_.id) {
						this.$store.commit('delRiderList', in_)
					}
				})
			},
			// 去选择出行人
			goToMen() {
				if (Number(this.riderPersionList.length) >= Number(this.memberNum)) {
					return uni.showToast({
						title: '当前要添加乘客数量不能超出预选',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: '/pagesSecond/hotel/selectMember?maxNum=' + this.memberNum
				})
			},
			// 余额支付成功
			payMoney(pwd) {
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(this.$api.payCustomizedOrderByYue, {
					orderId: this.orderId,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.finishCloseKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.navigateBack({
								delta: 1
							})
						},600)
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.navigateBack({
						delta: 1
					})
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none',
					mask: true,
				})
				setTimeout(() =>{
					uni.navigateBack({
						delta: 1
					})
				},600)
			},
			// 提交
			handeSubmitOrder() {
				if (!this.riderPersionList.length) return uni.showToast({
					title: '请选择出行人员',
					icon: 'none'
				})
				if(this.jifen != this.form.jifen){
					if (Number(this.totalMoney) < (Number(this.jifen) / 100)) {
						return uni.showToast({
							title: '所使用积分超出总价',
							icon: 'none'
						})
					} else if (Number(this.jifen) > Number(this.getCustomerInfo.rewardPoint)) {
						return uni.showToast({
							title: '没有这么多的积分',
							icon: 'none'
						})
					} else if (Number(this.jifen) > Number(this.maxJifen)) {
						return uni.showToast({
							title: '最多只能使用' + this.maxJifen + '积分抵扣',
							icon: 'none'
						})
					}
				}
				
				if (!this.isRead) return uni.showToast({
					title: '请阅读协议说明',
					icon: 'none'
				})
				let customerCouponId = this.choosedBusCoupon && this.choosedBusCoupon.customerCouponId && this.choosedBusCoupon
					.customerCouponId
				const _this = this
				this.$http.post(this.$api.customizedPreUnifieldOrder, {
						orderId: this.orderId,
						customerCouponId,
						jifen: this.form.jifen || 0,
						frontTotal: this.totalMoney,
						orderMemberVoList: this.riderPersionList
					})
					.then(res => {
						if (res.code === 200) {
							this.$refs.commonPay.show()
						}
					})
			},
			// 输入积分
			inputJifen(e) {
				console.log(e);
				if (Number(this.totalMoney) < (Number(e.detail.value) / 100)) {
					return uni.showToast({
						title: '总价过低',
						icon: 'none'
					})
				} else if (Number(e.detail.value) > Number(this.getCustomerInfo.rewardPoint)) {
					return uni.showToast({
						title: '没有这么多的积分',
						icon: 'none'
					})
				} else if (Number(e.detail.value) > Number(this.maxJifen)) {
					return uni.showToast({
						title: '最多只能使用' + this.maxJifen + '积分抵扣',
						icon: 'none'
					})
				}
			},
			//跳转选择优惠券列表
			handleGoBusCouponList() {
				if (!this.couponList.length) return
				uni.navigateTo({
					url: '/pagesSecond/hotel/selectCoupon?pageName=make&totalPrice=' + this.orderPrice + '&id=' + this.orderId
				})
			},
			// 获取页面数据
			getPageInfo() {
				this.$http
					.get(this.$api.customizedInfoDesc + "?orderId=" + this.orderId)
					.then((res) => {
						uni.stopPullDownRefresh();
						if (res.code === 200) {
							this.orderPrice = res.data.totalAmount || 0
							this.maxJifen = res.data.maxJifen || 0
							this.memberNum = res.data.memberNum || 0
							// this.totalMoney = res.data.statusVo.totalRealAmount
							this.getUseCouponList()
							if (Number(this.getCustomerInfo.rewardPoint) < Number(this.maxJifen)) {
								this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可使用 ' + this.getCustomerInfo.rewardPoint +
									' 积分抵扣'
							} else {
								this.maxYongJifen = '当前拥有 ' + this.getCustomerInfo.rewardPoint + ' 积分，最多可使用 ' + (this.maxJifen || 0) +
									' 积分抵扣'
							}
						}
					});
			},
			// 获取可用优惠券
			getUseCouponList() {
				this.$http.get(this.$api.makeTravelUseCouponList + '?orderId=' + this.orderId + '&orderPrice=' + this.orderPrice)
					.then(res => {
						if (res.code === 200) {
							this.couponList = res.data
							if (!res.data.length) {
								this.$store.commit('delChoosedBusCoupon')
							}
						}
					})
			},
			// 切换明细
			handleShowPriceDetail(s) {
				if (s === 'close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.popop_content {
		background-color: #fff;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
		padding: 20rpx 30rpx 98rpx;
	}
</style>
